<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
		<!-- v-for指令:
		1.用于展示列表数据
		2.语法: v-for="(item,index) in xxx" :key="yyy"
		3.可遍历:数组、对象、字符串（用的很少)、指定次数（用的很少) -->
		<div id="app">
			<ul>
				<li v-for="(item,index) of persons" :key="item.id">
					{{item.name}}-{{item.age}}--{{index}}
				</li>
			</ul>
			<ul>
				<!-- 遍历指定次数 -->
				<li v-for="(item,index) of 5" :key="index">
					{{item}}-{{index}}
				</li>
			</ul>
		</div>
		<script src="../vue.js"></script>
		<script>
			var app = new Vue({
				el: '#app', //Id #id class .name  标签 div
				//输出的数据
				data: function() {
					return {
						persons: [{
								id: '001',
								name: "帧数",
								age: 18
							},
							{
								id: '002',
								name: "帧数",
								age: 17
							},
							{
								id: '003',
								name: "帧数",
								age: 19
							},
						],

					}
				},
				//页面刷新时立刻执行的代码
				mounted: function() {},
				//对象 方法
				methods: {},
				//计算属性
				computed: {},
				//监视属性
				watch: {},
			});
		</script>
	</body>
</html>
